<template>
  <div class="box">
    <div class="orderInfo">
      <el-collapse v-model="activeNames" accordion>
        <el-collapse-item name="1">
          <template #title>
            <div class="operation-head" @click.stop>
              <div class="operation-list">
                <div class="list-itme" style="width: 30rem">
                  <span class="title">订单创建日期</span>
                  <el-date-picker v-model="orderCreationTime" type="daterange" value-format="YYYY-MM-DD HH-mm-ss" />
                </div>
                <div class="list-itme">
                  <span class="title">供应商名称</span>
                  <el-input v-model="orderListPaging.supplierName" placeholder="请输入" />
                </div>
                <div class="list-itme">
                  <span class="title">供应商编码</span>
                  <el-input v-model="orderListPaging.supplierCode" placeholder="请输入" />
                </div>
              </div>
              <div>
                <el-button class="heavy" @click="orderSelect">查询</el-button>
                <el-button class="type" @click="orderSelectReset">重置</el-button>
              </div>
            </div>
            <div style="color: #578c43; font-size: 16px; text-align: right; width: 5%">
              {{ activeNames[0] == '1' ? '收起' : '展开' }}
            </div>
          </template>
          <el-form
            ref="ruleFormRef"
            style="display: flex; flex-wrap: wrap; justify-content: space-between; width: 80%"
            :model="ruleForm"
            label-width="auto"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
          >
            <!-- <el-form-item label="订单状态" prop="materialStatus" class="materialselect" style="width: 30%;">
              <el-select v-model="ruleForm.materialStatus" placeholder="请选择订单状态">
                <el-option label="全部确认" value="0" />
                <el-option label="部分确认" value="1" />
                <el-option label="已拒绝" value="2" />
                <el-option label="待确认" value="3" />
                <el-option label="草稿" value="4" />
              </el-select>
            </el-form-item>
            <el-form-item label="订单标识" prop="materialStatus" class="materialselect" style="width: 30%">
              <el-select v-model="ruleForm.materialStatus" placeholder="请选择订单标识">
                <el-option label="采购订单" value="0" />
                <el-option label="非采购订单" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="订单类型" prop="materialType" class="materialselect" style="width: 30%">
              <el-select v-model="ruleForm.materialType" placeholder="请选择订单类型">
                <el-option label="PRGP" value="rawmaterials" />
                <el-option label="PRGC" value="norawmaterials" />
              </el-select>
            </el-form-item> -->
          </el-form>
        </el-collapse-item>
      </el-collapse>

      <div class="operation-central">
        <div><el-button class="type">重置</el-button></div>
        <div>
          <el-button class="heavy" @click="addorder">新增</el-button>
          <el-button class="type">导入</el-button>
        </div>
      </div>
      <div class="order-content">
        <el-table
          :data="orderData"
          size="default"
          style="width: 100%"
          :header-cell-style="{
            background: '#f8f8f9',
            color: '#555d70',
            fontWeight: 700,
            fontSize: 17 + 'px'
          }"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="orderCode" label="订单编码">
            <template #default="scope">
              <span style="color: #578c43; cursor: pointer" @click="gomultipleinfo(scope.row.supplierCode)">
                {{ scope.row.orderCode }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="订单状态">
            <template #default="scope">
              <el-button v-if="scope.row.state === `1`" type="success" plain :icon="CircleCheckFilled">
                全部确认
              </el-button>
              <el-button v-if="scope.row.state === `2`" color="#626aef" plain :icon="PieChart">部分确认</el-button>
              <el-button v-if="scope.row.state === `3`" type="danger" plain :icon="CircleClose">已拒绝</el-button>
              <el-button v-if="scope.row.state === `4`" type="warning" plain :icon="CircleCheck">待确认</el-button>
              <el-button v-if="scope.row.state === `5`" type="info" plain :icon="EditPen">草稿</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="orderTypeDesc" label="订单标识" />
          <el-table-column prop="needConfirm" label="需要确认">
            <template #default="scope">
              <div style="display: flex">
                <div :class="scope.row.needConfirm === '0' ? 'yuanb' : 'yuan'" />
                <span>{{ scope.row.needConfirm === '0' ? '否' : '是' }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="confirmTime" label="确认时间" />
          <el-table-column prop="supplierName" label="供应商名称" />
          <el-table-column prop="supplierCode" label="供应商编码" />
          <el-table-column prop="createTime" label="订单创建日期" />
          <el-table-column prop="orderType" label="订单类型" />
          <el-table-column prop="totalPriceWithoutTax" label="订单总额" />
          <el-table-column label="操作" fixed="right" width="200">
            <template #default="scope">
              <el-button type="danger" class="empty" @click="orderDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="demo-pagination-block">
          <el-pagination
            v-model:current-page="orderListPaging.currentPage"
            v-model:page-size="orderListPaging.pageSize"
            :background="background"
            :page-sizes="[10, 20, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="orderListPaging.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { Action} from 'element-plus';
import { type ComponentSize, ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
import { CircleCheck, CircleCheckFilled, CircleClose, EditPen, PieChart } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { orderInfoDelete, orderInfoList } from '@/api/order'

onMounted(() => {
  getOrderInquire()
})

const activeNames = ref(['0'])

//创建时间
const orderCreationTime = ref('')
//订单数据
interface order {
  //订单编码
  orderCode: string
  //订单状态
  state: string
  //订单标识
  orderTypeDesc: string
  //需要确认
  needConfirm: string
  //确认时间
  confirmTime: string
  //供应商名称
  supplierName: string
  //供应商编码
  supplierCode: string
  //订单创建日期
  createTime: string
  //订单类型
  orderType: string
  //订单总额(不含税)
  totalPriceWithoutTax: number
}
const orderData = ref<order[]>([])
//删除订单
const orderDelete = (row) => {
  if (orderData.value.length > 0) {
    ElMessageBox.confirm('你是否要删除掉这些数据?', '删除', {
      distinguishCancelAndClose: true,
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      confirmButtonClass: 'propfirmbtn'
    })

      .then(() => {
        orderInfoDelete(row.id)
          .then((data) => {
            ElMessage({
              type: 'success',
              message: '删除成功'
            })
            getOrderInquire()
          })
          .catch((err) => {
            ElMessage({
              type: 'error',
              message: err
            })
          })
      })
      .catch((action: Action) => {
        ElMessage({
          type: 'info',
          message: action === 'cancel' ? '取消删除' : ''
        })
      })
  }
}
//订单列表分页
const background = ref(true)
interface orderPaging {
  currentPage: number
  pageSize: number
  total: number
  createTimeStart: string
  createTimeEnd: string
  supplierName: string
  supplierCode: string
}
const orderListPaging = ref<orderPaging>({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  createTimeStart: '',
  createTimeEnd: '',
  supplierName: '',
  supplierCode: ''
})

const handleSizeChange = (val: number) => {
  orderListPaging.value.pageSize = val
  getOrderInquire()
}
const handleCurrentChange = (val: number) => {
  orderListPaging.value.currentPage = val
  getOrderInquire()
}
//查询订单列表
const getOrderInquire = () => {
  orderInfoList(orderListPaging.value).then((data) => {
    console.log(data.data.records)
    orderData.value = data.data.records as order[]
    orderListPaging.value.total = data.data.total
  })
}
//条件查询
const orderSelect = () => {
  orderListPaging.value.createTimeStart = orderCreationTime.value[0]
  orderListPaging.value.createTimeEnd = orderCreationTime.value[1]
  orderInfoList(orderListPaging.value).then((data) => {
    orderData.value = data.data.records as order[]
  })
}
//重置
const orderSelectReset = () => {
  orderCreationTime.value = ''
  orderListPaging.value.supplierName = ''
  orderListPaging.value.supplierCode = ''
}

// 查询条件
interface RuleForm {
  materialName: string
  materialId: string
  materialType: string
  materialStatus: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
  materialName: '',
  materialId: '',
  materialType: '',
  materialStatus: ''
})

// 查看订单信息
const router = useRouter()
const gomultipleinfo = (ids: string) => {
  router.push({
    name: 'orderDetail',
    query: { id: ids }
  })
}

const addorder = () => {
  router.push({
    name: 'orderAdd'
  })
}
</script>

<style scoped lang="scss">
.box {
  background: #f8f8f8;
  width: 100%;
  height: 89vh;
  box-sizing: border-box;
  padding: 15px 0;

  .orderInfo {
    width: 98%;
    margin: 0px auto;
    padding: 20px 30px;
    box-sizing: border-box;
    background: #fff;
    font-size: 15px;

    .operation-head {
      display: flex;
      width: 95%;
      justify-content: space-between;

      .operation-list {
        display: flex;
        width: 80%;
        .list-itme {
          width: 70%;
          margin-right: 30px;
          display: flex;
          white-space: nowrap;
          font-size: 16px;

          span {
            line-height: 32px;
          }

          .title {
            margin-right: 10px;
          }
        }
      }
    }

    .operation-central {
      margin-bottom: 30px;
      display: flex;
      justify-content: space-between;
    }

    .order-content {
      .empty {
        font-size: 15px;
        width: 0;
        color: #578c43;
        background: none;
        border: none;
        padding: 0;
      }

      .demo-pagination-block {
        display: flex;
        flex-direction: row-reverse;
        margin-top: 20px;
      }
    }
  }
}

.heavy {
  font-size: 15px !important;
  height: 40px !important;
  color: #fff;
  background: #578c43;
}

.type {
  font-size: 15px !important;
  height: 40px !important;
}

::v-deep .el-collapse {
  border: none !important;
  margin-bottom: 50px;
}

::v-deep .el-collapse-item__header {
  border: none !important;
}

::v-deep .el-collapse-item__wrap {
  border: none !important;
}

::v-deep .el-collapse-item__arrow {
  color: #578c43;
  font-size: 18px;
  position: relative;
  top: 1px;
}

::v-deep .el-input--small .el-input__wrapper {
  font-size: 16px;
}

::v-deep .list-itme .el-range-editor.el-input__wrapper {
  height: 32px;
}

::v-deep .list-itme .el-input__wrapper {
  height: 32px;
}

.el-button,
.el-button.is-round {
  width: 80px;
  height: 40px;
  font-size: 17px;
}

::v-deep .demo-pagination-block .el-pagination.is-background .el-pager li.is-active {
  background-color: #578c43;
}

::v-deep .order-content .el-table td.el-table__cell div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.color-all {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  margin: auto;
  padding: 0px 10px;
  border-radius: 5%;
  color: #6d9c5a;
  background: #deedd4;
}

.color-portion {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  margin: auto;
  padding: 0px 10px;
  border-radius: 5%;
  color: #7532d2;
  background: #f5e8ff;
}

.color-waiting {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  margin: auto;
  padding: 0px 10px;
  border-radius: 5%;
  color: #f08f42;
  background: #fff7e8;
}

.color-refused {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  margin: auto;
  padding: 0px 10px;
  border-radius: 5%;
  color: #ff0000;
  background: #f8a798;
}

.color-draft {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  margin: auto;
  padding: 0px 10px;
  border-radius: 5%;
  color: #8f8f8f;
  background: #c7c7c7;
}

.yuan {
  background: #578c43;
  border-radius: 50%;
  height: 8px;
  width: 8px;
  margin: auto 10px;
}
.yuanb {
  background: #c9cdd4;
  border-radius: 50%;
  height: 8px;
  width: 8px;
  margin: auto 10px;
}
</style>
